/*
 * @Author: zhangxin 411020991@qq.com
 * @Date: 2023-04-07 16:04:58
 * @LastEditors: zhangxin 411020991@qq.com
 * @LastEditTime: 2023-04-19 09:29:07
 * @FilePath: \CIMS-V6_Frontend\main\src\pages\User\Registration\index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';
import { Input, Radio, Space, Button, Form, Card, Checkbox, Modal, Select } from 'antd';
import { useState, useRef } from 'react';
import { useIntl } from '@umijs/max';
import ReactSimpleVerify from 'react-simple-verify'
import 'react-simple-verify/dist/react-simple-verify.css'
import LogoHeader from '../components/LogoHeader/index'
import { ExclamationOutlined } from '@ant-design/icons'
const { Option } = Select;



import './index.less';
const index = () => {
  const [form] = Form.useForm();
  const [value, setValue] = useState('registration');
  const [successTips, setSuccessTips] = useState('');
  const [emailValue, setEmailValue] = useState('');
  const [movedColor, setmovedColor] = useState('');
  const [disabled, setDisabled] = useState(true);
  const [open, setOpen] = useState(false);

  const intl = useIntl()
  const verify = useRef(true)
  const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

  const onFinish = (values) => {
    console.log('Success:', values);
    setValue(values.username);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  // 滑块验证通过逻辑
  const success = () => {
    if (regEmail.test(emailValue)) {
      setSuccessTips(intl.formatMessage({
        id: 'TEXT_60',
        defaultMessage: '验证通过'
      }))
      setmovedColor('#2979ff')
      setDisabled(false)
    } else {
      setSuccessTips(intl.formatMessage({
        id: 'TEXT_61',
        defaultMessage: '验证失败'
      }))
      setmovedColor('#fe0000')
    }
  }

  //reset()滑块重置方法
  const reset = () => {
    verify.current.reset()
  }

  // 验证账号：输入框值发生变化的方法
  const onChange = (e) => {
    setEmailValue(e.target.value)
    reset()
  }

  const prefixSelector = (
    <Form.Item name="prefix" noStyle>
      <Select
        style={{
          minWidth: 70,
          maxWidth: 200
        }}
        defaultValue='中国大陆+86'
      >
        <Option value="86">中国大陆+86</Option>
        <Option value="87">+87</Option>
      </Select>
    </Form.Item>
  );




  return (
    <div className='the-box'>
      <LogoHeader />
      <div className='box-center'>
        {/* 注册页面选择注册方式 */}
        {
          value === 'registration' && (
            <Card
              title={
                <>
                  {intl.formatMessage({
                    id: 'TEXT_44',
                    defaultMessage: '注册账号',
                  })}-
                  {intl.formatMessage({
                    id: 'TEXT_50',
                    defaultMessage: '注册方式',
                  })}
                </>
              }
              headStyle={{
                minHeight: 46,
                width: 718,
                margin: '0 auto',
                color: '#333',
                padding: 0,
                fontSize: 12,
                fontWeight: 'inherit',
                borderBottom: '1px solid #d0d0d0'
              }}
              bordered={false}
              bodyStyle={{
                width: 718,
                padding: 0
              }}
              style={{
                width: 800,
                height: 480
              }}
            >
              <div className='main'>
                <Form
                  name="basic"
                  labelCol={{
                    span: 8,
                  }}
                  wrapperCol={{
                    span: 16,
                  }}
                  style={{
                    maxWidth: 600,
                  }}
                  layout="vertical"
                  initialValues={{
                    remember: true,
                  }}
                  onFinish={onFinish}
                  onFinishFailed={onFinishFailed}
                  autoComplete="off"
                >
                  <Form.Item
                    name="username"
                    label={intl.formatMessage({
                      id: 'TEXT_51',
                      defaultMessage: '选择注册方式',
                    })}
                    style={{ marginTop: '40px' }}
                    rules={[
                      {
                        required: true,
                        message: intl.formatMessage({
                          id: 'TEXT_59',
                          defaultMessage: '请选择注册方式',
                        }),
                      },
                    ]}
                  >
                    <Radio.Group value={value}>
                      <Space direction="vertical">
                        <Radio value={'email'}>
                          {intl.formatMessage({
                            id: 'TEXT_52',
                            defaultMessage: '通过邮箱',
                          })}
                        </Radio>
                        <Radio value={'phone'}>
                          {intl.formatMessage({
                            id: 'TEXT_55',
                            defaultMessage: '通过手机号',
                          })}
                        </Radio>
                      </Space>
                    </Radio.Group>
                  </Form.Item>
                  <Form.Item>
                    <Button className='next-but' htmlType="submit">
                      {intl.formatMessage({
                        id: 'TEXT_57',
                        defaultMessage: '下一步',
                      })}
                    </Button>
                  </Form.Item>
                </Form>
              </div>
            </Card>
          )
        }
        {/* 邮箱注册 */}
        {
          value === 'email' && (
            <Card
              title={
                <>
                  {intl.formatMessage({
                    id: 'TEXT_44',
                    defaultMessage: '注册账号',
                  })}-
                  {intl.formatMessage({
                    id: 'TEXT_58',
                    defaultMessage: '验证账号',
                  })}
                </>
              }
              headStyle={{
                minHeight: 46,
                width: 718,
                margin: '0 auto',
                color: '#333',
                padding: 0,
                fontSize: 12,
                fontWeight: 'inherit',
                borderBottom: '1px solid #d0d0d0'
              }}
              bordered={false}
              bodyStyle={{
                width: 718,
                padding: 0
              }}
              style={{
                width: 800,
                height: 480
              }}
            >
              <div className='main'>
                <Form
                  name="basic"
                  labelCol={{
                    span: 8,
                  }}
                  wrapperCol={{
                    span: 16,
                  }}
                  style={{
                    maxWidth: 600,
                  }}
                  layout="vertical"
                  initialValues={{
                    remember: true,
                  }}
                  onFinish={onFinish}
                  onFinishFailed={onFinishFailed}
                  autoComplete="off"
                >
                  <Form.Item
                    name="username"
                    label={intl.formatMessage({
                      id: 'TEXT_53',
                      defaultMessage: '邮箱',
                    })}
                    style={{ marginTop: '40px' }}
                    rules={[
                      {
                        required: true,
                        message: intl.formatMessage({
                          id: 'TEXT_59',
                          defaultMessage: '请选择注册方式',
                        }),
                      },
                    ]}
                  >
                    <Input placeholder={intl.formatMessage({
                      id: 'TEXT_54',
                      defaultMessage: '请选择注册方式',
                    })}
                      onChange={onChange}
                      style={{
                        width: '320px',
                        height: '32px',
                        borderRadius: '4px'
                      }}
                    />
                  </Form.Item>
                  <Form.Item
                  >
                    <ReactSimpleVerify
                      successTips={successTips}
                      success={success}
                      ref={verify}
                      movedColor={movedColor}
                      width={320}
                      height={29}
                      tips={
                        intl.formatMessage({
                          id: 'TEXT_62',
                          defaultMessage: '请按住滑块，拖动到最右边',
                        })
                      }
                    />
                  </Form.Item>
                  <Form.Item>
                    <Button className='next-but' htmlType="submit" disabled={disabled}>
                      {intl.formatMessage({
                        id: 'TEXT_57',
                        defaultMessage: '下一步',
                      })}
                    </Button>
                  </Form.Item>
                </Form>
              </div>
            </Card>
          )
        }
        {/* 手机号注册 */}
        {
          value === 'phone' && (
            <Card
              title={
                <>
                  {intl.formatMessage({
                    id: 'TEXT_44',
                    defaultMessage: '注册账号',
                  })}-
                  {intl.formatMessage({
                    id: 'TEXT_58',
                    defaultMessage: '验证账号',
                  })}
                </>
              }
              headStyle={{
                minHeight: 46,
                width: 718,
                margin: '0 auto',
                color: '#333',
                padding: 0,
                fontSize: 12,
                fontWeight: 'inherit',
                borderBottom: '1px solid #d0d0d0'
              }}
              bordered={false}
              bodyStyle={{
                width: 718,
                padding: 0
              }}
              style={{
                width: 800,
                height: 480
              }}
            >
              <div className='main'>
                <Form
                  name="basic"
                  labelCol={{
                    span: 8,
                  }}
                  wrapperCol={{
                    span: 16,
                  }}
                  style={{
                    maxWidth: 600,
                  }}
                  layout="vertical"
                  initialValues={{
                    remember: true,
                  }}
                  onFinish={onFinish}
                  onFinishFailed={onFinishFailed}
                  autoComplete="off"
                >
                  <Form.Item
                    name="username"
                    label={intl.formatMessage({
                      id: 'TEXT_56',
                      defaultMessage: '手机号',
                    })}
                    style={{ marginTop: '40px' }}
                    rules={[
                      {
                        required: true,
                        message: intl.formatMessage({
                          id: 'TEXT_59',
                          defaultMessage: '请选择注册方式',
                        }),
                      },
                    ]}
                  >
                    <Input
                      addonBefore={prefixSelector}
                      style={{
                        width: '320px',
                        height: '32px',
                        borderRadius: '4px'
                      }}
                    />
                  </Form.Item>
                  <Form.Item
                  >
                    <ReactSimpleVerify
                      successTips={successTips}
                      success={success}
                      ref={verify}
                      movedColor={movedColor}
                      width={320}
                      height={32}
                      tips={
                        intl.formatMessage({
                          id: 'TEXT_62',
                          defaultMessage: '请按住滑块，拖动到最右边',
                        })
                      }
                    />
                  </Form.Item>
                  <Form.Item>
                    <Button className='next-but' htmlType="submit" disabled={disabled}>
                      {intl.formatMessage({
                        id: 'TEXT_57',
                        defaultMessage: '下一步',
                      })}
                    </Button>
                  </Form.Item>
                </Form>
              </div>
            </Card>
          )
        }

        {/* 完成注册 */}
        {
          regEmail.test(value) && (
            <>
              <Card
                title={
                  <>
                    {intl.formatMessage({
                      id: 'pages.login.registerAccount',
                      defaultMessage: '注册账号',
                    })}-
                    {intl.formatMessage({
                      id: 'pages.registration.personal.information',
                      defaultMessage: '个人信息',
                    })}
                  </>
                }
                headStyle={{
                  minHeight: 46,
                  width: 718,
                  margin: '0 auto',
                  color: '#333',
                  padding: 0,
                  fontSize: 12,
                  fontWeight: 'inherit',
                  borderBottom: '1px solid #d0d0d0'
                }}
                bordered={false}
                bodyStyle={{
                  width: 718,
                  padding: 0
                }}
                style={{
                  width: 800,
                  height: 480
                }}
              >
                <div className='main'>
                  <Form
                    name="basic"
                    labelCol={{
                      span: 8,
                    }}
                    layout="vertical"
                    wrapperCol={{
                      span: 16,
                    }}
                    style={{
                      maxWidth: 600,
                    }}
                    initialValues={{
                      remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                  >
                    <Form.Item
                      name="username"
                      label={intl.formatMessage({
                        id: 'TEXT_63',
                        defaultMessage: '姓名',
                      })}
                      style={{
                        margin: '40px 0px 16px'

                      }}
                      rules={[
                        {
                          required: true,
                          message: intl.formatMessage({
                            id: 'TEXT_59',
                            defaultMessage: '请选择注册方式',
                          }),
                        },
                      ]}
                    >
                      <Input
                        style={{
                          width: '320px',
                          height: '32px',
                          borderRadius: '4px',
                          margin: ' 0px '
                        }} />
                    </Form.Item>
                    <Form.Item
                      name="username"
                      label={intl.formatMessage({
                        id: 'TEXT_56',
                        defaultMessage: '手机号',
                      })}
                      style={{
                        margin: '0  0 16px'
                      }}
                    >
                      <Input
                        addonBefore={prefixSelector}
                        style={{
                          width: '320px',
                          height: '32px',
                          borderRadius: '4px',
                          margin: '0px'
                        }}
                      />
                    </Form.Item>
                    <Form.Item
                      name="username"
                      label={intl.formatMessage({
                        id: 'TEXT_53',
                        defaultMessage: '邮箱',
                      })}
                      style={{
                        margin: '0  0 12px'
                      }}
                    >
                      <Input
                        style={{
                          width: '320px',
                          height: '32px',
                          borderRadius: '4px'
                        }} />
                    </Form.Item>
                    <Form.Item
                      name="username"
                      label={intl.formatMessage({
                        id: 'TEXT_64',
                        defaultMessage: '单位名称',
                      })}
                      style={{
                        margin: '0  0 12px'
                      }}
                    >
                      <Input
                        style={{
                          width: '320px',
                          height: '32px',
                          borderRadius: '4px'
                        }} />
                    </Form.Item>
                    <Form.Item
                      name="username"
                      style={{
                        margin: '0  0 12px',
                        fontSize: 12
                      }}
                    >
                      <Checkbox>
                        {
                          intl.formatMessage({
                            id: 'TEXT_65',
                            defaultMessage: '我已阅读并接受《用户协议》和 《隐私政策》'
                          })
                        }
                        <span onClick={() => setOpen(true)}>
                          {
                            intl.formatMessage({
                              id: 'TEXT_87',
                              defaultMessage: '《用户协议》'
                            })
                          }
                        </span>
                        {
                          intl.formatMessage({
                            id: 'TEXT_89',
                            defaultMessage: '和'
                          })
                        }
                        <span onClick={() => setOpen(true)}>
                          {
                            intl.formatMessage({
                              id: 'TEXT_88',
                              defaultMessage: '《隐私政策》'
                            })
                          }
                        </span>
                      </Checkbox>
                    </Form.Item>
                    <Form.Item
                      style={{
                        margin: '0  0 12px'
                      }}
                    >
                      <Button
                        className='next-but'
                        htmlType="submit"
                        disabled={disabled}
                      >
                        {intl.formatMessage({
                          id: 'TEXT_66',
                          defaultMessage: '完成注册',
                        })}
                      </Button>
                    </Form.Item>
                  </Form>
                </div>
              </Card>

            </>
          )
        }
      </div>
      <>
        <Modal
          title="Modal 1000px width"
          centered
          open={open}
          onOk={() => setOpen(false)}
          onCancel={() => setOpen(false)}
          width={1000}
        >
          <p>some contents...</p>
          <p>some contents...</p>
          <p>some contents...</p>
        </Modal>
      </>
    </div>
  )
}

export default index
